/**
 * Il tema `investments-theme-css` espone già tab, descrizioni e utility (`_tab-selector.scss`, `_common`, vendor `nice-select`).
 * Con il tema sempre caricato sul sito, qui restano solo gli override che la CE React richiede davvero:
 * scroll orizzontale nativo sulla lista tab (il tema usa `overflow: hidden` sulla list-wrapper),
 * frecce senza `transform: rotate` del tema (icone icomoon), stato disabled più stretto, freccia lista link.
 */

.fund-tabs-web {
  .tab-selector-wrapper {
    width: 100%;
    min-width: 0;
  }

  .tab-selector-container {
    min-width: 0;
  }

  .tab-selector-wrapper .list-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .tab-selector-wrapper .list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .tab-selector-wrapper .nav-tabs {
    border: none;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  /**
   * Ogni voce occupa una porzione uguale dell'ul e centra il proprio anchor:
   * serve a replicare il layout della JSP originale (Vue + perfect-scrollbar),
   * dove ogni tab aveva il suo box di pari larghezza. Uso `flex: 1 1 auto`
   * così, se le voci superano la larghezza del container, ripiegano sulla
   * dimensione naturale e scatta lo scroll orizzontale nativo.
   */
  .tab-selector-wrapper .nav-tabs>li {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .tab-selector-wrapper .nav-tabs>li>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /*
   * Search-mode: c'e' una sola categoria nella lista e deve comparire
   * centrata fra le due frecce (che restano visibili ma disabilitate dal
   * normale calcolo di `updateScrollArrows`). Tolgo il `flex: 1 1 auto`
   * cosi' l'`<li>` mantiene la sua larghezza naturale invece di allargarsi
   * fino a occupare tutta la riga, e uso `justify-content: center` sul
   * contenitore per posizionarlo al centro.
   */
  &[data-search-mode="true"] .tab-selector-wrapper .nav-tabs {
    justify-content: center;
  }

  &[data-search-mode="true"] .tab-selector-wrapper .nav-tabs>li {
    flex: 0 0 auto;
  }

  &[data-search-mode="true"] .tab-selector-wrapper .nav-tabs>li>a {
    width: auto;
  }

  .container-arrow {
    z-index: 2;
  }

  .container-arrow.scroll-left {
    transform: none;
    left: 0;
    transition: color 0.2s ease;
  }

  .container-arrow.scroll-left .fund-tabs-scroll-chevron {
    transform: rotate(180deg);
    display: inline-block;
  }

  .container-arrow.scroll-right {
    right: 0;
    transition: color 0.2s ease;
  }

  .container-arrow.disabled {
    color: #898989;
    cursor: default;
    pointer-events: none;
  }

  .container-arrow.disabled:hover {
    color: #898989;
  }

  .fund-tabs-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .description-list-wrapper .description-list-item .fund-tabs-link-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.75rem;
    color: #0092ff;
    font-style: normal;
  }

  .description-list-wrapper .description-list-item .fund-tabs-link-arrow::before {
    content: "→";
    font-size: 1.15em;
    line-height: 1;
    font-family: system-ui, "Segoe UI", sans-serif;
    font-weight: 400;
  }

  /**
   * Apertura/chiusura pannello descrizione più fluida del vecchio max-height fisso.
   * Uso grid rows per animare da 0fr a 1fr e opacità leggera in ingresso.
   */
  .slide-up-down {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.38s ease, opacity 0.28s ease;
    will-change: grid-template-rows, opacity;
  }

  .slide-up-down.is-active {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .slide-up-down__inner {
    min-height: 0;
    overflow: hidden;
  }


  .tab-select--wrapper .nice-select.sub-select .list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 50;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    background: linear-gradient(180deg, #1c1c1c 0%, #202020 35%, #1e1e1e 100%);
    border-radius: 8px;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
  }

  .tab-select--wrapper .nice-select.sub-select .list .option {
    padding: 8px 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .tab-select--wrapper .nice-select.sub-select .list .option:hover {
    background: #1e1e28;
  }

  .tab-select--wrapper .nice-select.sub-select .list .option.selected {
    color: #0092ff;
  }

  /*
    Banner blu "N risultati trovati" mostrato quando la CE è in search_mode.
    Replica il blocco storico della pagina di ricerca: sfondo pieno, scritte
    bianche centrate e grande spazio verticale (~364px). Su mobile riduco
    l'altezza minima per non monopolizzare lo schermo.
  */
  .fund-search-banner {
    background: #43AAFE;
    color: #ffffff;
    min-height: 364px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    padding: 2rem 1rem;
  }

  .fund-search-banner__inner {
    width: 100%;
  }

  .fund-search-banner__title {
    display: inline-flex;
    align-items: center;
    font-size: 54px !important;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
  }

  .fund-search-banner__title .bi-globe2 {
    font-size: 0.80em !important;
    line-height: 1;
  }

  .fund-search-banner__subtitle {
    margin: 0;
    font-size: 20px !important;
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .fund-search-banner {
      min-height: 220px;
    }

    .fund-search-banner__title {
      display: block;
      font-size: 40px !important;
      font-weight: 700;
      margin: 0 0 0.75rem;
    }

    .fund-search-banner__title .bi-globe2 {
      font-size: 0.8em !important;
      line-height: 1;
      padding-right: 15px;
    }

    .fund-search-banner__subtitle {
      margin: 0;
      font-size: 12px !important;
      font-weight: 600;
    }
  }
}/**
 * Gli stili dell’app stanno in `App.css` e `fund-tabs-theme.css`, tutti annidati sotto
 * `.fund-tabs-web` sul root React. Qui non imposto regole globali sul tema Liferay.
 */